<template>
  <div>
    <router-link to="APP">
      <div class="goodsImgBox" v-for="(v,i) in categoryList" :key="i" v-if="i<=3">
        <img :src=v.image alt="">
        <div style="box-shadow: 0 0 1vw .2vw #f5f5f5;background: #fff;margin-top: -2vw;width: 100%;height:19vw;">
          <!--<div style="width: 100%;height:19vw;">-->
          <p  style="padding-left: 1vw;box-sizing:border-box">{{v.goods_name}}</p>
          <p class="Goodsprice">￥{{v.sell_price}} <span>￥{{v.market_price}}</span></p>
        </div>
      </div>
    </router-link>

    <div class="clear"></div>
  </div>
</template>

<script>
  export default {
    name: "homeGoodsList",
    props:['goodsList','id'],
    data(){
      return{
        categoryList:[],

      }
    },
    /* updated(){
         console.log(111)
     },*/
    created(){
        var that=this;
        this.$http({
          url:'/super/api/Shop/getGoodsByCid',
          method:'post',
          data:{
            category_id:31,
            page:this._globe.page,
            time:this._globe.time1,
            device_id:this._globe.device_id,
            version:this._globe.version,
            platform:this._globe.platform,
            /*token:this._globe.token1,*/
          }
        })
          .then(function (response) {
            const resData=response.data;
           /* console.log(resData);*/
            if(resData.code==1){
              that.categoryList=resData.data.list;
            }
          })
          .catch(function (response) {
            console.log(response);
          })


    },
    mounted(){
      /*  var that=this;
        this.$http({
          url:'/api/api/Shop/getGoodsByCid',
          method:'post',
          data:{
            category_id:this.id,
            page:this._globe.page,
            time:this._globe.time1,
            device_id:this._globe.device_id,
            version:this._globe.version,
            platform:this._globe.platform,
            /!*token:this._globe.token1,*!/
          }
        })
          .then(function (response) {
            console.log(response);
            const resData=response.data;
            if(resData.code==1){
              that.categoryList=resData.data.list;
              console.log( that.categoryList.list);
              console.log(id);
              /!*that.infoList = resData.data.list.info;
              *!/
            /!*  console.log( that.categoryList);*!/
              /!*that.categoryList.forEach((item,index) => {
                if (item['info']){
                  that.infoList = resData.data.list.info;
                  console.log(infoList);
                }

              })*!/

            }
          })
          .catch(function (response) {
            console.log(response);
          })*/

    },
  }
</script>

<style scoped lang="scss">
  @media screen and (max-width: 375px) and (min-width: 320px){
    p{
      font-size: 13px !important;
    }
  }
  .goodsImgBox{
    width:44vw;
    height: auto;
    display: inline-block;
    float: left;
    margin: 1vw 1vw 0 1vw;
    img{
      width: 44vw;
      height: 44vw;
    }
    p{
      font-size: 16px;
      color: #353535;
      margin-top: 0.4vw;
      text-align: left;
      width: 100%;
      height: 11vw;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
      /* line-clamp: 2;*/
      /* text-overflow: ellipsis;*/
    }
    .Goodsprice{
      font-size: 16px;
      color:#FF4C50;
      float: left;
      margin-top: 0vw;
      span{
        font-size: 10px;
        color: #888;
        text-decoration: line-through;
      }
    }
  }
</style>
